<template>
    <div class="second_level_page sale_statistics_page">
        <section class="tab_section">
            <div class="tab" :class="{active: stateFlag=='0'}" @click="rustomerRankingList">排行榜</div>
            <div class="tab" :class="{active: stateFlag=='1'}" @click="customerNewAdd">新增</div>
            <div class="tab" :class="{active: stateFlag=='2'}" @click="customerLive">月活</div>
            <div class="tab" :class="{active: stateFlag=='3'}" @click="customerLoss">流失</div>
        </section>
        <section class="statistics_main">
            <ul class="choose_time">
                <li v-if="flag==1" class="active">
                    <div @click="todayData">今天</div>
                </li>
                <li v-else>
                    <div @click="todayData">今天</div>
                </li>
                <li v-if="flag==2" class="active">
                    <div @click="currentMonthData">本月</div>
                </li>
                <li v-else>
                    <div @click="currentMonthData">本月</div>
                </li>
                <li v-if="flag==3" class="active">
                    <div @click="lastMonthData">上月</div>
                </li>
                <li v-else>
                    <div @click="lastMonthData">上月</div>
                </li>
                <li v-if="flag==4" class="active">
                   <div  @click="customData">自定义时间段</div>
                </li>
                <li v-else>
                   <div  @click="customData">自定义时间段</div>
                </li>
            </ul>
            
            <div class="table">
                <div style="margin-top: -0.3rem;"  class="text">
                    <div v-if="timeFlag" style="color: red;font-size:.26rem;"  class="left">时间段：{{startTime}} 至 {{endTime}} &emsp;</div>
                    <div v-if="selectTimeFlag" style="color: #ff0000;font-size:.26rem;" class="left" >时间：{{selectTime}}</div>
                    <div style="color: #6666ff;" v-if="stateFlag=='1'" class="right">共计：{{totalNum}}个新客户</div>
                    <div style="color: #6666ff;" v-if="stateFlag=='2'" class="right">共计：{{totalNum}}个活跃客户</div>
                    <div style="color: #6666ff;" v-if="stateFlag=='3'" class="right">共计：{{totalNum}}个流失客户</div>
                    <div class="clear"></div>
                </div>
                <div style="" class="row head_row">
                    <div class="cell ">店铺名</div>
                    <div class="cell ">交易量（件）</div>
                    <div class="cell ">交易额（元）</div>
                    <div v-if="startTimeFlag" class="cell ">首单时间</div>
                    <div v-if="endTimeFlag" class="cell ">末单时间</div>
                </div>
                <v-scroll class="receive_voucher_scroll" :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" style="margin-top:.3rem; z-index:-20">
                    <ul  id="ul" >
                        <li class="row"  v-for="item in data" >
                            <div v-if="item" class="cell">{{item.businessName?((item.businessName.length>6)?(item.businessName.substring(0,5)+'...'):(item.businessName)):''}}</div>
                            <div class="cell">{{item.statisticBuyNum}}</div>
                            <div class="cell">{{fmoney(item.statisticMoney?item.statisticMoney:0)}}</div>
                            <div v-if="startTimeFlag" class="cell">{{item.minTime.substring(0,10)}}</div>
                            <div v-if="endTimeFlag" class="cell">{{item.maxTime.substring(0,10)}}</div>
                        </li>
                    </ul>
                </v-scroll>
            </div>
        </section>



        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>

        <div id="noTouch" v-show="showGrey" @click="disappear"></div>


        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>

    </div> 
</template>

<script>           
    import Scroll from 'src/components/common/pulldown'
    import loading from 'src/components/common/loading'
    import 'src/plugins/lCalendar.js'
    import 'src/style/lCalendar.css'
    import {fmoney} from 'src/config/mUtils'
    import {formatDate} from 'src/config/date'
    import {StatisticalOfCustomerRankingList,StatisticalOfCustomerNewAdd,StatisticalOfCustomerLive,StatisticalOfCustomerLoss} from 'src/service/getData'
    import {mapState} from 'vuex'

    export default {
        data(){
            return{
                startRow:1, //开始页数
                endRow:20, //结束页数
                loadingText:'加载中...',
                counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
                num : 20,  // 一次显示多少条
                data: [], // 下拉更新数据存放数组
                addData: [],  // 上拉更多的数据存放数组
                startTime:"",
                endTime:"",
                stateFlag:'0',//tabType类型
                flag:2,//查询类型，1：今天，2：本月,3:上月，4：自定义时间段，0：默认排序
                startTimeFlag:false,
                endTimeFlag:false,
                timeFlag:false,
                totalNum:0,
                showLoading: true, //显示加载动画
                showGrey:false,/*显示蒙灰层*/
                token:'',
                fmoney,
                selectTime:'',
                formatDate,
                selectTimeFlag:true,
            }
        },
        mounted(){

            if(this.$route.query.token){
                this.token = this.$route.query.token;
            }
            else{
                this.token=this.userInfo.token;
            }

            if(this.$route.query.startTime){
                this.startTime = this.$route.query.startTime;
                this.endTime = this.$route.query.endTime;
            }
           if(this.$route.query.flag){
                this.flag = this.$route.query.flag;
           }
           if (this.$route.query.stateFlag) {
           		this.stateFlag = this.$route.query.stateFlag;
                this.timeFlag = true;
                this.selectTimeFlag = false;
                this.showLoading = false;
                this.showGrey=true
           } 

            this.initData();
        },
        computed:{
            ...mapState([
                'userInfo',
            ]),
        },
        components: {
            'v-scroll':Scroll,
            loading,
        },         
        methods: {
            //初始化数据
            async initData(){
                this.data = [];
                if(this.flag==2){
                    this.selectTime = formatDate(new Date(),'yyyy-MM');
                }
                this.showGrey=false;
                this.totalNum = 0;
                this.counter = 1;
                this.startRow = 1;
                this.endRow = 20;
                this.startTimeFlag = false;
                this.endTimeFlag = false;
                let response ;
                if(this.stateFlag=='0') {
                    response = await StatisticalOfCustomerRankingList(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.data = response.list;
                } else if(this.stateFlag=='1') {
                    this.num = 100000000;
                    this.startTimeFlag = true;
                    response = await StatisticalOfCustomerNewAdd(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.data = response.list;
                    this.totalNum = response.count;
                } else if(this.stateFlag=='2') {
                    response = await StatisticalOfCustomerLive(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.data = response.list;
                    this.totalNum = response.count;
                } else if(this.stateFlag=='3') {
                    this.num = 100000000;
                    this.endTimeFlag = true;
                    response = await StatisticalOfCustomerLoss(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.data = response.list;
                    this.totalNum = response.count;
                }
                if(response.resultCode==0){
                    alert(response.resultMessage);
                    this.customData();
                    return;
                }
                if(this.data==null||this.data==""){
                    this.loadingText='加载完毕……';
                    this.$el.querySelector('.load-more').style.display = 'none';
                    this.showLoading = false;
                    return;
                }
                //启动上拉加载功能
                if(this.num > this.data.length){
                    //禁用上拉加载功能
                    this.loadingText='加载完毕……';
                    this.$el.querySelector('.load-more').style.display = 'none';
                }else{
                    this.$el.querySelector('.load-more').style.display = 'block';
                }  
                this.showLoading = false;


            },
            //下拉刷新，count=2，从第二页开始加载数据
            onRefresh(done) {

                this.loadingText='加载中……';
                this.initData();
                done()
            },
            //加载更多
            async onInfinite(done){
                this.counter++;
                this.endRow = this.num * this.counter;
                this.startRow = this.endRow - this.num+1;
                //获取信息
                let response ;
                if(this.stateFlag=='0') {
                    response = await StatisticalOfCustomerRankingList(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.addData = response.list;
                } else if(this.stateFlag=='1') {
                    response = await StatisticalOfCustomerNewAdd(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.addData = response.list;
                } else if(this.stateFlag=='2') {
                    response = await StatisticalOfCustomerLive(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.addData = response.list;
                } else if(this.stateFlag=='3') {
                    response = await StatisticalOfCustomerLoss(this.token,this.startTime,this.endTime,this.flag,this.startRow,this.endRow);
                    this.addData = response.list;
                }
                this.data = this.data.concat(this.addData);
                if(this.num > this.addData.length){
                    //禁用上拉加载功能
                    this.loadingText='加载完毕……';
                    this.$el.querySelector('.load-more').style.display = 'none';
                }else{
                    this.$el.querySelector('.load-more').style.display = 'block';
                }  
                done()
            },
            //客户统计----排行榜
            rustomerRankingList(){
                this.flag = 2;
                this.selectTime = formatDate(new Date(),'yyyy-MM');
                this.clear();
                this.stateFlag = '0';
                this.initData();
               
            }, 
            //客户统计----新增
            customerNewAdd(){
                this.flag = 2;
                this.selectTime = formatDate(new Date(),'yyyy-MM');
                this.clear();
                this.stateFlag = '1';
                this.initData();
            
                
            }, 
            //客户统计----月活
            customerLive(){
                this.flag = 2;
                this.selectTime = formatDate(new Date(),'yyyy-MM');
                this.clear();
                this.stateFlag = '2'; 
                this.initData();
                
            },  
            //客户统计----流失
            customerLoss(){
                this.flag = 2;
                this.selectTime = formatDate(new Date(),'yyyy-MM');
                this.clear();
                this.stateFlag = '3';
                this.initData();

                 
            }, 
            //今天
            todayData(){
                this.flag = 1;
                this.selectTime = formatDate(new Date(),'yyyy-MM-dd');
                this.clear();
                this.initData();
             
            },
            //本月
            currentMonthData(){
                this.flag = 2;
                this.selectTime = formatDate(new Date(),'yyyy-MM');
                this.clear();
                this.initData();
            },
            //上月
            lastMonthData(){
                this.flag = 3;
                this.clear();
                this.selectTime = formatDate(new Date(new Date(formatDate(new Date(),'yyyy-MM')+"-01 00:00:00").getTime()-1),'yyyy-MM');
                this.initData();
            },
            //自定义
            customData(){
                this.flag = 4;
                this.clear();
                this.startTime = '';
                this.endTime = '';
                this.timeFlag = true;
                this.selectTimeFlag = false;
                this.showLoading = false;
                this.showGrey=true
                this.toChoseTime();
                

                
               
               
               
            },
            toChoseTime(){
	            this.$router.replace({path:'/profile/statistics/goodsStatistics/choseTime',query:{ toIndex:4,flag:this.flag,stateFlag:this.stateFlag}});
	        },
            customTimeQuery(){
                this.showLoading = true;
                this.initData();
            },
            clear(){
                this.timeFlag = false;
                this.selectTimeFlag = true;
                this.startTimeFlag = false;
                this.endTimeFlag = false;
                this.data = [];
                this.totalNum = 0;
                this.showLoading = true;
            },
            
            disappear(){
                this.showGrey=false;
                this.timeState = false;
            }

        },
        watch:{
            userInfo:function(value){
                this.onRefresh(done);
            },
            'endTime':'customTimeQuery'
        }
    }
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.32rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;

        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .statistics_main{
        margin-top: 1.08rem;
        
        background: #fff;
        .choose_time{
            padding:  .2rem.4rem ;
            margin:.3rem 0;
            display:flex;
            li{
                
                @include wh(.92rem, .4rem);
                margin-right: .56rem;
                div{
                    @include wh(100%, 100%);
                    @include sc(.3rem, $blue);
                    text-align: center;
                    border-radius: .2rem;
                }
            }
            li:last-child{
                margin-right: 0;
                width: 2.1rem;
            }
            li.active{
                div{
                    background: $blue;
                    color: #fff;
                    border-radius:1rem;
                }
            }
        }
        .text{
            div{
                @include sc(.26rem, #666);
            }
        }
        .table{
            // padding: .58rem .24rem .52rem;
            // margin-bottom:.58rem;

             .text{
                width:100vw;
               
                 flex: 1;
                justify-content:space-around;
                padding:0 .2rem
             }
            .row{
                display: flex;
                margin-bottom: .2rem;


                .cell{
                    flex: 1;
                    @include sc(.28rem, #333);
                    text-align: center;
                    height: .28rem;
                    line-height: .28rem;
                    margin-top:.1rem
                }
            }
            .head_row{
                // margin:0 .1rem 0 .2rem;
                padding-bottom:.2rem ;
                .cell{
                    color: #666;
                }
            }
            .footer_row{
                margin-top: .02rem;
                margin-bottom: 0;
                .cell{
                    color: #c8574b;
                }
            }
        }  
    }
    .tab_section{
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.28rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            // margin: 0 .2rem;
        }
        .tab.active{
            color: $orange;
            border-bottom: .04rem solid $orange;
        }
    }
    .receive_voucher_scroll .inner{
        padding-bottom: .22rem;
    }
    .timeSelect{
        position: fixed;
        background:#fff;
        width:100%;
        text-align:center;
        height:3.5rem;
        z-index:30;

    }
    .timeClass{
        @include wh(100%, 100%);
        @include sc(.35rem, $blue);
        text-align: center;
        border-radius: .2rem;
     
    }

    #noTouch{
        width:100vw;
        height:100vh;
        position:absolute;
        top:0;
        left:0;
        background-color:rgba(66,66,66,0.3);
        z-index:20
    }
    #ul{
        margin:0.4rem  0.2rem 0 .25rem;
        // padding-top:.4rem
    }
</style>
